<template>
  <div class="container">
    <div class="top">
      <!-- <div class="search-bar clearfix"
           @tap.stop="search()">
        <div class="search-content">
          <input type="text"
                 class="search-inp"
                 disabled>
          <div class="icon">
            <img :src="base_url+'/mp_2.0/shouye/sousuokuangneisousuo@2x.png'"
                 v-if="base_url"
                 alt=""
                 class="img">
          </div>
        </div>
        <div class="search-btn">
          搜索
        </div>
      </div>-->
      <div class="selection clearfix">
        <div class="select-item" :class="show_area?'up':'down'" @tap="toggle_area">
          {{province_name==""?'地区':province_name}}
          <div class="icon">
            <img :src="base_url+'/xia-hui@2x.png'" v-if="base_url" alt class="img" />
          </div>
        </div>
        <div class="select-item" :class="show_project?'up':'down'" @tap="toggle_project">
          {{project_name==""?'项目':project_name}}
          <div class="icon">
            <img :src="base_url+'/xia-hui@2x.png'" v-if="base_url" alt class="img" />
          </div>
        </div>
        <div class="select-item" :class="aiSort?'up':'down'" @tap.stop="toggle_service()">
          {{sort_name==""?'智能排序':sort_name}}
          <div class="icon">
            <img :src="base_url+'/xia-hui@2x.png'" v-if="base_url" alt class="img" />
          </div>
        </div>
      </div>
    </div>
    <div class="list-content clearfix">
      <scroll-view
        :scroll-y="true"
        :style="{'height': '100%'}"
        @scrolltolower="infiniteScroll"
        :enable-back-to-top="true"
        :lower-threshold="150"
      >
        <hospital-list :hos_list="hospital_arr"></hospital-list>
        <list-bottom v-if="isbottom"></list-bottom>
      </scroll-view>
      <div class="model" v-if="show_area||show_project ||aiSort" @tap.stop="close_model()">
        <ul class="list" :class="show_area?'list-show':'list-hide'" v-if="show_area">
          <scroll-view :scroll-y="true" :style="{'height': '100%'}">
            <li
              class="list-item"
              v-for="(item, index) in province_arr"
              :key="index"
              @tap="change_area(item)"
            >{{item.name}}</li>
          </scroll-view>
        </ul>
        <ul class="list" :class="show_project?'list-show':'list-hide'" v-if="show_project">
          <scroll-view :scroll-y="true" :style="{'height': '100%'}">
            <li
              class="list-item"
              v-for="(item, index) in project_arr"
              :key="index"
              @tap="change_project(item)"
            >{{item.name}}</li>
          </scroll-view>
        </ul>
        <ul class="list" :class="aiSort?'list-show':'list-hide'" v-if="aiSort">
          <scroll-view :scroll-y="true" :style="{'height': '100%'}">
            <li
              class="list-item"
              v-for="(item, index) in sortList"
              :key="index"
              @tap="change_sort(item)"
            >{{item.name}}</li>
          </scroll-view>
        </ul>
      </div>
       <div v-if="empty" class="empty">
      <img
        src="https://img.ameimeika.com/h5_images/mp_images/mp_3.0/search/nocar.png"
        alt
        class="img"
      />
      <div class="p">暂无相关内容</div>
    </div>
    </div>
   
  </div>
</template>

<script>
import common from "@/assets/js/mmk_common.js";
import hospitalList from "@/components/search_list/hospital_list";
import listBottom from "@/components/search/result_item/bottom";
export default {
  data() {
    return {
      base_url: common.image_resource,
      show_area: false,
      show_project: false,
      aiSort: false,
      page: 1,
      pageSize: 10,
      hospital_arr: [],
      province_id: null,
      province_name: "",
      rating: 1,
      isbottom: false,
      province_arr: [],
      project_arr: [],
      sortList: [],
      project_id: null,
      project_name: "",
      sort_id: null,
      sort_name: "",
      empty: false
    };
  },
  methods: {
    get_list() {
      if (this.isbottom) {
        return false;
      }
      var orderByTagsId, orderByLabelsId;
      if (this.sort_id == 1) {
        //90天无理由退款
        orderByLabelsId = this.sort_id;
        orderByTagsId = null;
      } else {
        orderByTagsId = this.sort_id;
        orderByLabelsId = null;
      }
      common.fly_post(
        "api/com.mmk.reservation.api.OpenHospitalProvider/1.0.0/list.html",
        {
          pageNum: this.page,
          pageSize: this.pageSize,
          province: this.province_id, // 省份id
          // rating_sort: this.rating, // 服务
          firstCategories: this.project_id, // 项目id
          orderByTagsId: orderByTagsId,
          orderByLabelsId: orderByLabelsId
        },
        result => {
          let res = result.data;
          if (res.code == 0) {
            console.log(res.data.list);
            if (res.data.list == null && this.page == 1) {
              this.empty = true;
              return false;
            } else if (res.data.list == null) {
              return false;
            }
            let list = res.data.list;
            if (list.length > 0 && this.page == 1) {
              this.hospital_arr = res.data.list;
            } else if (list.length > 0 && this.page > 1) {
              this.hospital_arr.push(...res.data.list);
              // this.hospital_arr.concat(res.data.list)
              // console.log(this.hospital_arr)
            } else if (list.length == 0 && this.page > 1) {
              this.isbottom = true;
            } else {
              wx.showToast({
                title: "暂无医院", //提示的内容,
                icon: "none", //图标,
                duration: 1500, //延迟时间,
                mask: false, //显示透明蒙层，防止触摸穿透,
                success: res => {}
              });
            }
          } else {
            wx.showToast({
              title: res.message, //提示的内容,
              icon: "none", //图标,
              duration: 1500, //延迟时间,
              mask: false, //显示透明蒙层，防止触摸穿透,
              success: res => {}
            });
          }
        },
        "isJava"
      );
    },
    get_province() {
      common.fly_post("api/v4_2/address/index", {}, result => {
        let res = result.data;
        if (res.status_code == "0") {
          let arr = res.data;
          //   arr.unshift({
          //     id: 0,
          //     name: '全国'
          //   })
          this.province_arr = arr;
        }
      });
    },
    get_project() {
      common.fly_post(
        "api/v4_2/beauty_categories/list",
        { type: 3 },
        result => {
          let res = result.data;
          if (res.status_code == "0") {
            let arr = res.data;
            //   arr.unshift({
            //     id: 0,
            //     name: '全部'
            //   })
            this.project_arr = arr;
          }
        }
      );
    },
    toggle_area() {
      this.aiSort = false;
      this.show_project = false;
      this.show_area = !this.show_area;
      this.empty = false;
    },
    toggle_project() {
      this.aiSort = false;
      this.show_area = false;
      this.show_project = !this.show_project;
       this.empty = false;
    },
    close_model() {
      this.show_area = false;
      this.show_project = false;
      this.aiSort = false;
       this.empty = false;
    },
    toggle_service() {
      // this.page = 1
      // this.isbottom = false
      // this.show_area = false
      // this.show_project = false
      // this.rating = this.rating == 1 ? 0 : 1
      // this.get_list()
      this.show_area = false;
      this.show_project = false;
      this.aiSort = !this.aiSort;
    },
    change_area(item) {
      this.page = 1;
      this.province_id = item.id;
      this.province_name = item.name;
      this.isbottom = false;
      this.hospital_arr = [];
      this.get_list();
    },
    change_project(item) {
      this.page = 1;
      this.isbottom = false;
      this.project_id = item.id;
      this.project_name = item.name;
      this.hospital_arr = [];
      this.get_list();
    },
    change_sort(item) {
      this.page = 1;
      this.isbottom = false;
      this.sort_id = item.value;
      this.sort_name = item.name;
      this.hospital_arr = [];
      this.get_list();
    },
    infiniteScroll() {
      this.page++;
      console.log(this.page);
      this.get_list();
    },
    search() {
      wx.navigateTo({ url: "/pages/package_main/search_index/main" });
    },
    getHospital() {
      common.fly_post("api/v4_2/hospitals/index", "", result => {
        console.log(result);
      });
    },
    //智能排序接口
    getSortData() {
      common.fly_post(
        "/api/com.mmk.reservation.api.OpenHospitalProvider/1.0.0/queryParams.html",
        "",
        result => {
          console.log(result.data);
          if (result.data.code == 0) {
            // console.log(result);
            this.sortList = result.data.data.tag;
            this.sortList.push(...result.data.data.label);
          }
        },
        "isJava"
      );
    }
  },
  onLoad() {
    wx.setNavigationBarTitle({
      title: "严选机构"
    });
    Object.assign(this.$data, this.$options.data());
    this.get_list();
    this.get_province();
    this.get_project();
    // this.getHospital() //智能筛选数据
    this.getSortData();
  },
  components: {
    hospitalList,
    listBottom
  }
};
</script>

<style lang="less" scoped>
.container {
  height: 100%;
  width: 100%;
  background: rgba(243, 244, 246, 1);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  .top {
    .search-bar {
      height: 44px;
      width: 100%;
      display: flex;
      background-color: #fff;
      .search-content {
        flex: 1;
        height: 100%;
        position: relative;
        margin-left: 15px;
        .search-inp {
          height: 32px;
          margin-top: 6px;
          background: rgba(244, 244, 244, 1);
          border-radius: 16px;
        }
        .icon {
          width: 20px;
          height: 20px;
          position: absolute;
          left: 10px;
          top: 50%;
          transform: translateY(-50%);
          z-index: 10;
          .img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .search-btn {
        width: 58px;
        height: 44px;
        line-height: 44px;
        text-align: center;
        font-size: 14px;
        font-family: "PingFangSC-Regular";
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
      }
    }
    .selection {
      background-color: #fff;
      padding: 0 15px;
      height: 40px;
      display: flex;
      justify-content: space-between;
      line-height: 40px;
      font-size: 14px;
      font-family: "PingFangSC-Regular";
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
      border-bottom: 1px solid rgba(243, 244, 246, 1);
      .select-item {
        flex: 1;
        .icon {
          width: 8px;
          height: 5px;
          display: inline-block;
          vertical-align: middle;
          margin-left: 8px;
          .img {
            width: 100%;
            height: 100%;
            display: block;
          }
        }
        &:nth-of-type(1) {
          text-align: left;
          padding-left: 10px;
        }
        &:nth-of-type(2) {
          text-align: center;
        }
        &:nth-of-type(3) {
          text-align: right;
          padding-right: 10px;
        }
      }
      .up {
        .icon {
          transform: rotate(180deg);
          transition: all 0.5s;
        }
      }
      .down {
        .icon {
          transform: rotate(0deg);
          transition: all 0.5s;
        }
      }
    }
  }
  .list-content {
    flex: 1;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
    .model {
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.4);
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      overflow: hidden;
      z-index: 9999;
      .list {
        width: 100%;
        height: 360px;
        background-color: #fff;
        padding: 0 15px;
        box-sizing: border-box;
        transition: all 1s;
        .list-item {
          height: 44px;
          line-height: 44px;
          text-align: center;
          font-size: 14px;
          font-family: "PingFangSC-Regular";
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
          border-top: 1px solid rgba(244, 244, 244, 1);
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
        }
      }
      .list-show {
        animation: show_list 0.5s;
      }
      .list-hide {
        animation: hide_list 0.5s;
      }
      .area-list {
      }
    }
     .empty {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    .img {
      width: 130px;
      height: 114px;
      display: block;
      margin: 0 auto;
    }
    .p {
      margin: 0 auto;
      margin-top: 15px;
      text-align: center;
      width: 170px;
      font-size: 14px;
      font-family: "PingFangSC-Regular";
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
    }
  }
  }
 
}
@keyframes show_list {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes hide_list {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}
</style>
